<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import EchartPie from '@/components/Echart/pie/index.vue'

import * as echarts from 'echarts'
const chartPieBonusData = reactive({
  name: 'bonusPie',
  roseType: 'radius',
  legend: {
    top: '25%',
  },
  series: {
    radius: ['40%', '70%'],
  },
  label: {
    normal: {
      show: true,
    },
  },
  data: [
    { value: 2048, name: '中国区' },
    { value: 1305, name: '欧美区' },
    { value: 1005, name: '亚太区' },
    // { value: 1045, name: '非洲区' },
    // { value: 1405, name: '美洲区' }
  ],
})

// 子组件执调用
const refbonusPie = ref(null)
const upDataDemo4 = () => {
  chartPieBonusData.data.push({ value: 500, name: 'pang pang' }) // 更新数据
  refbonusPie.value.createChart()
}
const chartPieAreaData = reactive({
  name: 'areaPie',
  roseType: 'radius',
  legend: {
    top: '25%',
  },
  label: {
    normal: {
      show: true,
    },
  },
  data: [
    { value: 2048, name: '中国区' },
    { value: 1305, name: '欧美区' },
    { value: 1305, name: '亚太区' },
    { value: 1045, name: '非洲区' },
    { value: 1405, name: '美洲区' },
  ],
})
// 子组件执调用
const refAreaPie = ref(null)
const upDataDemo3 = () => {
  chartPieAreaData.data.push({ value: 500, name: 'pang pang' }) // 更新数据
  refAreaPie.value.createChart()
}
const ren = '123'
const bi = '20%'
const pieName = `老会员`
const pieName1 = `新会员`
const chartPieData = reactive({
  name: 'memberPie',
  roseType: '',
  legend: {
    top: '40%',
  },
  data: [
    { value: 2048, name: pieName },
    { value: 1305, name: pieName1 },
  ],
})
// 子组件执调用
const refPie = ref(null)
const upDataDemo = () => {
  chartPieData.data.push({ value: 500, name: 'pang pang' }) // 更新数据
  refPie.value.createChart()
}

const chartPieAchievementData = reactive({
  name: 'achievement',
  roseType: '',
  legend: {
    top: '40%',
  },
  data: [
    { value: 1048, name: '全球零售业绩' },
    { value: 1735, name: '拓展业绩' },
  ],
})

const achievementPie = ref(null)
const upDataDemo2 = () => {
  console.log('子组件执调用，upDataDemo2被执行了')
  chartPieAchievementData.data.push({ value: 500, name: '大屏' }) // 更新数据
  achievementPie.value.createChart()
}
</script>

<template>
  <el-carousel class="carousel" :interval="5000">
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>这是图表1</h1>
        </template>
        <!-- <EchartPie
          :ref="'ref' + chartPieData.name"
          :chart-data="chartPieData"
          @handelUpData="upDataDemo"
        /> -->
      </card-box>
    </el-carousel-item>
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>全球新老会员业绩占比</h1>
        </template>
        <!-- <EchartPie
          :ref="'ref' + chartData2.name"
          :chart-data="chartData2"
          @handelUpData="upDataDemo2"
        /> -->
      </card-box>
    </el-carousel-item>
  </el-carousel>
  <el-carousel class="carousel" :interval="5000">
    <el-carousel-item> </el-carousel-item>
    <el-carousel-item> </el-carousel-item>
    <el-carousel-item> </el-carousel-item>
  </el-carousel>
  <el-carousel class="carousel" :interval="5000">
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>全球新老会员业绩占比</h1>
        </template>
        <EchartPie
          :ref="'ref' + chartPieBonusData.name"
          :chart-data="chartPieBonusData"
          @handelUpData="upDataDemo4"
        />
      </card-box>
    </el-carousel-item>
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>全球零售业绩与拓展业绩占比</h1>
        </template>
        <EchartPie
          :ref="'ref' + chartPieAreaData.name"
          :chart-data="chartPieAreaData"
          @handelUpData="upDataDemo3"
        />
      </card-box>
    </el-carousel-item>
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>全球新老会员业绩占比</h1>
        </template>
        <EchartPie
          :ref="'ref' + chartPieData.name"
          :chart-data="chartPieData"
          @handelUpData="upDataDemo"
        />
      </card-box>
    </el-carousel-item>
    <el-carousel-item>
      <card-box>
        <template v-slot:title>
          <h1>全球零售业绩与拓展业绩占比</h1>
        </template>
        <EchartPie
          :ref="'ref' + chartPieAchievementData.name"
          :chart-data="chartPieAchievementData"
          @handelUpData="upDataDemo2"
        />
      </card-box>
    </el-carousel-item>
  </el-carousel>
</template>

<style lang="scss" scoped>
.carousel {
  width: 100%;
}
</style>
